<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>AUI快速完成布局</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <style>
        html,
        body {
            background-color: #F2F4F5;
        }

        .aui-content {
            margin-top: 25px;
        }

        .aui-list {
            background-color: transparent;
        }

        .aui-list-item {
            background-color: #fff;
            margin-bottom: 15px !important;
        }

        #input-vercode {
            width: 100px;
            margin-right: 100px;
            float: left;
            position: relative;
        }

        .register-vercode-btn {
            background-image: linear-gradient(to right, #81B846, #81B846);
            right: 15px;
            color: #fff;
            padding: 7px 7px;
            position: absolute;
            border-radius: 6px;
            margin-top: 4px;
            font-size: 0.7rem;
            box-shadow: 0 5px 5px rgba(129,184,70, 0.3);
            transition: all .3s;
        }

        .register-vercode-btn:active {
            background-image: linear-gradient(to right, #81B846, #81B846);
            transform: scale(0.9);
            transition: all .05s;
        }
        /*.hidden {
            display: none;
            transition: all 1s;
        }*/
    </style>
</head>

<body>
    <!-- <div class="aui-tips aui-margin-b-15 hidden" id="topTips" style="background-color:#707070;opacity:0.8;position：absolute;">
        <i class="aui-iconfont aui-icon-info"></i>
        <div class="aui-tips-title" id='topTips-title'>验证码发生成功</div>
        <i class="aui-iconfont aui-icon-close"></i>
    </div>
    </div> -->
    <div class="aui-content">
        <ul class="aui-list aui-form-list">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        用户名
                    </div>
                    <div class="aui-list-item-input">
                        <input type="text" placeholder="请输入您的用户名" id="user_name">
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        密码
                    </div>
                    <div class="aui-list-item-input">
                        <input type="password" placeholder="请输入您的密码" id="user_password">
                    </div>
                </div>
            </li>
            <li class="aui-list-item" style="margin-bottom: 0 !important;">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        手机
                    </div>
                    <div class="aui-list-item-input">
                        <input type="number" placeholder="请输入您的手机号码" pattern="\d*" id="user_phone">
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label" id="user_vercode">
                        验证码
                    </div>
                    <div class="aui-list-item-input">
                        <input id="input-vercode" type="number" placeholder="手机验证码" pattern="\d*">
                        <div class="register-vercode-btn" tapmode onclick="vercodeOnclick()">获取验证码</div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../../script/aui-toast.js"></script>
<script type="text/javascript">
    var toast = new auiToast();
    apiready = function() {
        api.parseTapmode();
        api.setFrameAttr({
            name: 'register',
            bounces: false
        });
    }

    function vercodeOnclick() {
        sendCode();
        if ($(".register-vercode-btn").text() != "获取验证码") {
            return;
        }
        vercodeEnable(false);
        $(".register-vercode-btn").text("获取验证码(60)");
        startVercodeTiming();
    }

    function vercodeEnable(enable) {
        if (typeof enable == "undefined") {
            enable = true;
        }
        if (enable) {
            $(".register-vercode-btn").css("background-image", "linear-gradient(to right, #FD7754, #F89951)");
            $(".register-vercode-btn:active").css("background-image", "linear-gradient(to right, #FD9D84, #F8B27E)");
            $(".register-vercode-btn").css("box-shadow", "0 5px 5px rgba(250,138,82,0.2)");
        } else {
            $(".register-vercode-btn").css("background-image", "linear-gradient(to right, #D1D1D1, #E0E0E0)")
            $(".register-vercode-btn:active").css("background-image", "linear-gradient(to right, #D1D1D1, #E0E0E0)")
            $(".register-vercode-btn").css("box-shadow", "0 5px 5px rgba(0,0,0,0.05)");
        }
    }

    function sendCode() {
        var phone = $("#user_phone").val();
        api.ajax({
            url: 'http://95.163.194.157:8080/kezhan/user/phone',
            method: 'post',
            data: {
                values: {
                    phone: phone
                }
            }
        }, function(ret, err) {
            if (ret) {
                if (ret.code == 200) {
                    toast.success({
                        title: '验证码发生成功',
                        duration: 2000
                    });
                } else {
                    toast.fail({
                        title: ret.msg,
                        duration: 2000
                    });
                }
            } else {
                toast.fail({
                    title: '网络错误',
                    duration: 2000
                });
            }
        });

    }

    function startVercodeTiming() {
        var timeLeft = 60;
        var intId = 0;
        intId = setInterval(function() {
            timeLeft = timeLeft - 1;
            if (timeLeft == 0) {
                $(".register-vercode-btn").text("获取验证码");
                vercodeEnable();
                clearInterval(intId);
                return;
            }
            $(".register-vercode-btn").text("获取验证码(" + timeLeft + ")");
        }, 1000);
    }

    function register() {
        var username = $("#user_name").val();
        var password = $("#user_password").val();
        var phone = $("#user_phone").val();
        var vercode = $("#input-vercode").val();
      }
</script>

</html>
